<template>
    <div class="component-search">
        <van-icon name="arrow-left" @click="back"/>
        <van-search v-model="value" shape="round" background="#161624" placeholder="请输入搜索关键词">
            <template #action>
                <div>搜索</div>
            </template>
        </van-search>
        <span @click="onSearch">搜索</span>
    </div>
</template>
<script>
// import { throttle } from "filters/throttle.js";

export default {
    name: "search",
    props: {
        file: {
            type: String,
            default: null,
        },
    },

    data() {
        return { value: "" };
    },
    methods: {
        back() {
            this.$router.back();
        },
        onSearch() {
            this.$emit("search", this.value);
        },
    },
};
</script>
<style lang="scss">
.component-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #161624;
    padding: 0 16px;
    .van-icon {
        font-size: 16px;
    }
    .van-search {
        flex: 1;
    }
    .van-search {
        padding: 6px 10px;
    }
    .van-search__content {
        background-color: #161624;
        border: 1px solid #2d2c3c;
    }
    .van-field__control {
        color: #fff;
    }
}
</style>
